import React, { useState, useEffect } from 'react';
import { Table } from 'antd';
import type { TableProps } from 'antd';

type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
type TablePaginationPosition<T extends object> = NonNullable<
	TablePagination<T>['position']
>[number];

interface BorderTableProps {
	columns: { title: string; dataIndex: string; key: string }[]; // 表头配置
	dataSource: Record<string, any>[]; // 表格数据
}

const BorderTable: React.FC<BorderTableProps> = ({ columns, dataSource }) => {
	const [bottom, setBottom] = useState<TablePaginationPosition<BorderTableProps>>('bottomLeft');
	const [currentPage, setCurrentPage] = useState(1);
	const [pageSize, setPageSize] = useState(5);

	const handlePaginationChange = (page: number, pageSize: number) => {
		setCurrentPage(page); // 更新当前页
		setPageSize(pageSize); // 更新每页条数
	};

	// 分页配置的状态初始化
	const [paginationConfig, setPaginationConfig] = useState<TablePagination<any>>({
		pageSize: 10, // 默认每页条目数
		position: [bottom],
		total: 0, // 初始总条目数
		showSizeChanger: true, // 显示每页条目数选择器
		pageSizeOptions: ['1', '5', '10', '20'] // 每页条目数选择器
	});

	useEffect(() => {
		setPaginationConfig(prevConfig => ({
			...prevConfig,
			current: currentPage, // 设置当前页
			pageSize: pageSize, // 设置每页条数
			total: dataSource.length, // 更新总条目数
			onChange: handlePaginationChange // 绑定事件
		}));
	}, [dataSource, currentPage, pageSize]); // 依赖项更新

	// 在 columns 配置中增加自定义 render
	const customColumns = columns.map(col => {
		if (col.dataIndex === 'outQuantity') {
			return {
				...col,
				render: (text: any) => {
					const style = { color: '#17B059' };
					return <span style={style}>{text}</span>;
				}
			};
		} else if (col.dataIndex === 'inQuantity') {
			return {
				...col,
				render: (text: any) => {
					const style = { color: '#1890FF' };
					return <span style={style}>{text}</span>;
				}
			};
		} else if (col.dataIndex === 'operation') {
			return {
				...col,
				render: (text: any, record: any) => {
					let modifiedText = [...text]; // 复制一份原来的 text 数组，避免直接修改原始数据

					// 根据 枯萎盘点 修改操作按钮
					if (record.inventoryStatus === '盘点中') {
						modifiedText = ['录入', ...modifiedText]; // '盘点中' 状态时添加 '录入'
					} else if (record.inventoryStatus === '盘点完成') {
						modifiedText = ['审核', ...modifiedText]; // '盘点完成' 状态时添加 '审核'
					}

					// 根据 出库 修改操作按钮
					if (record.outboundStatus === '已出库') {
						modifiedText = [...modifiedText, '详情'];
					} else if (record.outboundStatus === '待出库') {
						modifiedText = [...modifiedText, '出库'];
					} else if (record.outboundStatus === '部分出库') {
						modifiedText = [...modifiedText, '出库', '详情'];
					}

					// 根据 入库 修改操作按钮
					if (record.outboundStatus === '已入库') {
						modifiedText = [...modifiedText, '详情'];
					} else if (record.outboundStatus === '待入库') {
						modifiedText = [...modifiedText, '入库'];
					} else if (record.outboundStatus === '部分入库') {
						modifiedText = [...modifiedText, '入库', '详情'];
					}

					return (
						<span style={{ display: 'flex', justifyContent: 'flex-end' }}>
							{modifiedText.map((operation: string) => (
								<span key={operation} style={{ marginRight: 8, color: '#1890FF' }}>
									{operation}
								</span>
							))}
						</span>
					);
				}
			};
		} else if (col.dataIndex === 'reminder') {
			return {
				...col,
				render: (text: any, record: any) => {
					let style = {}; // 默认空样式
					let reminderText = '无'; // 默认值

					// 判断库存状态，并设置提醒文本和样式
					if (record.availableStock < record.warningLowerLimit) {
						style = { color: '#FF4D4F' }; // 过低预警，红色
						reminderText = '过低预警';
					} else if (record.availableStock > record.warningUpperLimit) {
						style = { color: '#FF4D4F' }; // 过高预警，红色
						reminderText = '过高预警';
					}

					// 返回带样式的span
					return <span style={style}>{reminderText}</span>;
				}
			};
		} else if (col.dataIndex === 'profitLossQuantity' || col.dataIndex === 'profitLossAmount') {
			return {
				...col,
				render: (text: any, record: any) => {
					if (text > 0) {
						return <span style={{ color: '#00bb00' }}>+{text}</span>;
					} else if (text < 0) {
						return <span style={{ color: 'red' }}>{text}</span>;
					}
				}
			};
		} else if (col.dataIndex === 'outboundStatus') {
			return {
				...col,
				render: (text: any, record: any) => {
					if (text === '已出库') {
						return <span style={{ color: '#888' }}>{text}</span>;
					} else if (text === '待出库') {
						return <span style={{ color: '#00bb00' }}>{text}</span>;
					} else if (text === '部分出库') {
						return <span style={{ color: '#FF884F' }}>{text}</span>;
					}

					if (text === '已入库') {
						return <span style={{ color: '#888' }}>{text}</span>;
					} else if (text === '待入库') {
						return <span style={{ color: '#00bb00' }}>{text}</span>;
					} else if (text === '部分入库') {
						return <span style={{ color: '#FF884F' }}>{text}</span>;
					}
				}
			};
		}
		return col;
	});

	return (
		<Table
			columns={customColumns}
			dataSource={dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)} // 分页数据
			rowKey="key" // 假设每行数据都有唯一的 key
			pagination={paginationConfig}
		/>
	);
};

export default BorderTable;
